<template>
  <div class="combination">
    <c-title :hide="false" text="组合券"></c-title>
    <div class="list" v-for="(item, index) in info" :key="index">
      <coupon_Combination @newCombination="tonewCombination(item, item.id)" :first="true" :infoData="item.combination_coupon" :can_combination="item.can_combination"></coupon_Combination>
      <div class="mr">=</div>
      <template v-for="(child, ind) in item.combination_detail">
        <coupon_Combination :infoData="child" :key="ind"></coupon_Combination>
        <div class="mr" :key="ind" v-if="ind != item.combination_detail.length - 1">+</div>
      </template>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import coupon_Combination from "./components/coupon_Combination.vue";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      info: [],
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    tonewCombination(item, id) {
      if (!item.can_combination) return;
      this.$router.push(this.fun.getUrl("new_CouponCombinationDetail", { id: id }));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.combination.index", { id: this.$route.params.id }, "");
      if (result) {
        this.info = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    }
  },
  components: { coupon_Combination }
};
</script>
<style lang="scss" scoped>
.combination {
  overflow: hidden;
  margin: 0.63rem 0.75rem;
  .list {
    margin-bottom: 0.63rem;
    padding: 0.63rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    overflow-x: scroll;
    .mr {
      margin: 0 0.44rem;
      font-weight: bold;
      font-size: 0.81rem;
      padding-bottom: 1.5rem;
    }
  }
}
</style>
